<script setup>
import { ref } from 'vue'

import {defineProps} from "vue"
import {listEndAssignment, listOngoingAssignment} from "../../api/course/course.js";
import router from "../../router/index.js";
import {isPermission} from "../../utils/utils.js";
const prop = defineProps(['courseId'])
// 选择器
const radio = ref(1)

// 作业列表
const assignments=ref();
// 作业图片列表
const assignmentImg=['https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240712184633.png','https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240712184636.png']
// 获取考试列表
const handleListAssignments=async ()=>{
  assignments.value=[];
  await listOngoingAssignment(prop.courseId).then(res=>{
    if(res.data.length!==0)
      assignments.value.push.apply(assignments.value,res.data);
      assignments.value.map( assignment =>{
        assignment['img']=0;
        return assignment;
      })
  })
  await listEndAssignment(prop.courseId).then(res=>{
    if(res.data.length!==0)
      assignments.value.push.apply(assignments.value,res.data);
      assignments.value.map( assignment =>{
        if(!('img' in assignment))
          assignment['img']=1;
        return assignment;
      })
  })
  console.log(assignments.value);
}


// 筛选考试列表
const handleConditionListAssignments=async ()=>{
  if(radio.value===1)
    await handleListAssignments();
  else if(radio.value===2)
    await listOngoingAssignment(prop.courseId).then(res=>{
      assignments.value=res.data;
      assignments.value.map( assignment =>{
        assignment['img']=0;
        return assignment;
      })
    });
  else if(radio.value===3)
    await listEndAssignment(prop.courseId).then(res=>{
      assignments.value=res.data;
      assignments.value.map( assignment =>{
        assignment['img']=1;
        return assignment;
      })
    });
}
// 跳转到管理页面
const handleGoAssignmentManage=()=>{
  router.push("/assignmentmanage")
}
// 跳转到作业详情
const handleGoAssignment=(assignment)=>{
  if(assignment.img===0)
    router.push("/assignment/"+assignment.id)
}



handleListAssignments();

</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 100px;">
        <el-divider style="margin-top: 50px"></el-divider>
        <el-form-item label="筛选" >
          <el-radio-group
              v-model="radio"
              @change="handleConditionListAssignments"
          >
            <el-radio :value="1">全部</el-radio>
            <el-radio :value="2">进行中</el-radio>
            <el-radio :value="3">已结束</el-radio>
          </el-radio-group>
          <el-button type="primary" style="margin-left: auto;" @click="handleGoAssignmentManage" v-if="isPermission(2)">作业管理</el-button>
        </el-form-item>

      </el-header>
      <el-main style="height: 60vh">
        <el-card style="margin-top: 10px;margin-bottom: 10px" v-for="assignment in assignments" :key="assignment.id" @click="handleGoAssignment(assignment)">
          <div style="display: flex;align-items: center;">
            <img class="assignment-img" :src="assignmentImg[assignment.img]"/>
            <span>{{assignment.name}}</span>
            <div style="margin-left: auto;">
              <span style="margin-right: 20px">结束时间</span>
              <span>{{ new Date(assignment.endTime).toLocaleString('zh-CN', { month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true }).replace('上午', 'AM').replace('下午', 'PM').replace('AM', '上午').replace('PM', '下午') }}</span>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.assignment-img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border-radius: 2px;
}
</style>